<template>
  <el-date-picker
    v-model="content"
    type="datetimerange"
    range-separator="-"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    value-format="YYYY-MM-DD HH:mm:ss"
    clearable
  ></el-date-picker>
</template>

<script lang="ts" setup>
import { withDefaults, computed } from 'vue'

/* Props S */
const props = withDefaults(
  defineProps<{
    startTime?: string
    endTime?: string
  }>(),
  {
    startTime: '',
    endTime: ''
  }
)
const emit = defineEmits(['update:startTime', 'update:endTime'])

const content = computed<any>({
  get: () => {
    return [props.startTime, props.endTime]
  },
  set: (value: Event | any) => {
    if (value === null) {
      emit('update:startTime', '')
      emit('update:endTime', '')
    } else {
      emit('update:startTime', value[0])
      emit('update:endTime', value[1])
    }
  }
})
</script>
